<template>
  <view>
    <!-- 头部title -->
    <view class="head">
      <view :style="[{'padding-top': menuButtonObject.top + 'px'}]" class="head-title">
        <image src="https://wechat-pictures-1301970825.cos.ap-beijing.myqcloud.com/shop/spdt-index.png.png"
               mode=""></image>
      </view>

      <view class="head-text">
        <image src="https://wechat-pictures-1301970825.cos.ap-beijing.myqcloud.com/shop/spdt-sl.png" mode=""></image>
        <view>答题截止时间：</view>
      </view>
      <view class="head-time">{{ videoInfo.endTime }}</view>
    </view>

    <view class="info">
      <view class="info-title">
        <text>店长标题:</text>
        {{ videoInfo.title }}
      </view>
      <view class="info-title" style="color: #666;">视频简介: {{ videoInfo.videoAbstract }}</view>
      <view class="info-yhbt">用户标题</view>
      <view class="info-video">
        <view class="info-video-left">
          <view class="info-video-left-view"></view>
          <!-- 接口输入Img -->
          <image class="info-video-left-img1" :src="videoInfo.coverUrl" mode=""></image>
          <!-- 顶部img -->
          <image class="info-video-left-img2"
                 src="https://wechat-pictures-1301970825.cos.ap-beijing.myqcloud.com/shop/tg-move-img.png"></image>
        </view>
        <view class="info-video-right">{{ videoInfo.titleCus }}</view>
      </view>
    </view>
    <button class="btn" type="default" open-type="share">继续分享</button>

  </view>
</template>

<script>
export default {
  data() {
    return {
      menuButtonObject: {},
      requestCode: '', // 服务器端 code
      videoInfo: {}, // 界面信息展示
    }
  },
  onShow() {
    this.menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
  },
  onLoad(req) {
    this.requestCode = req.requestCode;
    this.getInfo();
  },
  onShareAppMessage(res) {
    return {
      title: this.videoInfo.titleCus,
      path: '/pages/newAnswer/completePaly?requestCode=' + this.requestCode + '&videoId=' + this.videoInfo.videoId,
      imageUrl: this.videoInfo.coverUrl
    }
  },
  methods: {
    // 获取分享信息
    getInfo() {
      var that = this;
      var data = {
        requestCode: this.requestCode,
      };
      that.$NoteApi.doRequest("get", "getShareInfo", data).then(res => {
        if (res.data.code == 0) {
          this.videoInfo = res.data.data;
        }
      })
    },
  }
}
</script>

<style scoped>
.head {
  width: 750upx;
  height: 430upx;
  background-image: url(https://wechat-pictures-1301970825.cos.ap-beijing.myqcloud.com/shop/tg-bgjz.png);
  background-size: 100% 100%;
  background-repeat: repeat;
  position: relative;
  z-index: -1;
}

.head-title {
  width: 750upx;
  height: 110upx;
  display: flex;
  align-items: center;
}

.head-title image {
  width: 40upx;
  height: 40upx;
  margin-left: 30upx;
}

.head-text {
  width: 750upx;
  height: 50upx;
  margin-top: 40upx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32upx;
  font-weight: 500;
  color: #FFFFFF;
}

.head-text image {
  width: 28upx;
  height: 32upx;
  margin-right: 10upx;
}

.head-time {
  width: 750upx;
  text-align: center;
  margin-top: 30upx;
  font-size: 40upx;
  color: #fff;
  font-weight: 500;
}

.info {
  width: 750upx;
  min-height: 100upx;
  padding: 0 30upx;
  background-color: #fff;
  border-radius: 20upx;
  margin-top: -100upx;
}

.info-title {
  color: #666;
  font-size: 34upx;
  font-weight: 500;
  padding: 30upx 0;
  border-bottom: 2upx solid #F3F3F3;
}

.info-title text {
  color: #999;
  margin-right: 30upx;
}

.info-yhbt {
  font-size: 34upx;
  color: #666;
  font-weight: 500;
  padding: 30upx 0;
}

.info-video {
  width: 100%;
  height: 120upx;
  display: flex;
  align-items: center;
}

.info-video-left {
  width: 120upx;
  height: 120upx;
  border-radius: 16upx;
  position: relative;
  margin-right: 30upx;
  overflow: hidden;
}

.info-video-left-view {
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.5;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
}

.info-video-left-img1 {
  width: 120upx;
  height: 120upx;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

.info-video-left-img2 {
  position: absolute;
  left: 30upx;
  top: 30upx;
  width: 60upx;
  height: 60upx;
  z-index: 999;
}

.info-video-right {
  flex: 1;
  font-size: 34upx;
  color: #666;
  font-weight: 500;
}

.btn {
  width: 686upx;
  height: 88upx;
  line-height: 88upx;
  background: #2580F0;
  color: #fff;
  text-align: center;
  border-radius: 8upx;
  position: fixed;
  left: 30upx;
  bottom: 50upx;
}
</style>
